<template>
    <div class="container">
        <mt-field label="phone" placeholder="Input tel" type="tel" v-model="phone"></mt-field>


        <mt-field label="password" placeholder="Input password" type="password" v-model="password"></mt-field>


        <mt-field label="captcha" :attr="{ maxlength: 4 }" v-model="captcha">
            <div class="captcha">
                <div v-if=!isTrue @click="get" class="get">
                    获取验证码
                </div>
                <div v-else=isTrue class='get'> 
                    {{ valid_code }}
                </div>

            </div>
        </mt-field>

        <mt-button @click="zhuce" type="primary">注册</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            phone: '',
            password: '',
            captcha: '',
            isTrue:false,
            valid_code:''
        }
    },
    methods: {
        get() {
            const numberReg = /^1[38][25]\d{8}$/
            if (this.phone.length == 11 && numberReg.test(this.phone)) {
                this.$axios({
                    url:this.$api.code,
                    data:{
                        password : this.password,
                        username : this.phone
                    }
                }).then(res =>{
                    this.isTrue = !this.isTrue
                    this.valid_code = res.valid_code
                    
                })
            } else {
                Toast('手机号不合法');
            }


        },
        zhuce() {
            
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.captcha {
    height: 30px;
    width: 100px;
    border: 1px solid grey;

    .get {
        line-height: 30px;
    }
}
</style>